<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>vue1</title>
        <script src="js/vue.js"></script>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            
            .a{
                width: 300px;
                height: 300px;
                background: red;
            }
            .b{
                width: 200px;
                height: 200px;
                background: blue;
            }
            .c{
                width: 100px;
                height: 100px;
                background: green;
            }
        </style>
    </head>
    <body>
        <div id="app">
            
            <!-- <button onclick="alert('aaaa')">我是按钮</button> -->
            <!-- <button v-on:click="myFn">我是按钮</button> -->
            <!-- <button @click="myFn">我是按钮</button> -->

            <!--.once 使事件监听的回调函数只执行一次  -->
            <!-- <button @click.once="myFn">我是按钮once</button> -->

            <!-- 阻止元素的默认行为 -->
            <!-- <a href="www.baidu.com" @click.prevent>我是a标签</a> -->

            <!-- 阻止事件冒泡 -->
            <!-- <div class="a" @click="myFn1">
                <div class="b" @click="myFn2">
                    <div class="c" @click.stop="myFn3">

                    </div>
                </div>
            </div> -->

            <!-- 如果想让回调只有当前元素触发的话使用self -->
            <!-- <div class="a" @click="myFn1">
                <div class="b" @click.self="myFn2">
                    <div class="c" @click="myFn3">
                    </div>
                </div>
            </div> -->

            <!-- 默认是事件冒泡，如果需要事件捕获加入capture即可 -->
            <div class="a" @click.capture="myFn1">
                <div class="b" @click.capture="myFn2">
                    <div class="c" @click.capture="myFn3">
                    </div>
                </div>
            </div>

        </div>
        <script>
            let vue = new Vue({
        // 告诉vue的实例对象，将来需要控制界面上的那个区域
                el:'#app',
                data:{
                    name:"内容1",

                },
                methods: {
                    myFn(){
                        alert("aaa");
                    },
                    myFn1(){
                        alert("爷爷");
                    },
                    myFn2(){
                        alert("粑粑");
                    },
                    myFn3(){
                        alert("儿子");
                    }
                },
            });
        </script>
    </body>
</html>